<template>
  <main-container>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'authorManage' }">作者列表</el-breadcrumb-item>
      <el-breadcrumb-item>作者详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form label-width="80px">
      <el-form-item label="作者：">
        {{ authorInfo.name }}
      </el-form-item>
      <el-form-item label="头像：">
        <el-image style="width: 100px; height: 100px" :src="authorInfo.avatar" fit="cover"></el-image>
      </el-form-item>
      <el-form-item label="诗篇：">
        {{ authorInfo.works }}
      </el-form-item>
      <el-form-item label="简介：">
        <el-input type="textarea" :rows="8" v-model="authorInfo.profile"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">修改</el-button>
      </el-form-item>
    </el-form>
    <create :authorInfo.sync="authorInfo"></create>
    <v-table
      ref="table"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
      :data="tableData"
      :columns="columns"
    >
    </v-table>
  </main-container>
</template>

<script>
import { getAuthorDetail, getAuthorUpdate, getAuthorWorks, getAuthorDelWorks } from '@/api/author'
import table from '@/common/mixins/table'
import create from './components/create'

export default {
  name: 'AuthorDetail',
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  mixins: [table],
  components: {
    create
  },
  data() {
    return {
      authorInfo: {},
      tableData: [],
      columns: [
        {
          label: '作者',
          prop: 'name'
        },
        {
          label: '朝代',
          prop: 'dynasty'
        },
        {
          label: '诗词名',
          prop: 'title'
        },
        {
          label: '诗词内容',
          prop: 'content',
          isShowTip: true
        },
        {
          label: '标签',
          prop: 'tags',
          render: (h, params) => {
            let { tags } = params.row
            let types = ['', 'success', 'info', 'warning', 'danger']
            return h('div', [
              tags &&
                tags.split('，').map(item =>
                  h(
                    'el-tag',
                    {
                      props: {
                        type: types[Math.floor(Math.random() * types.length) + 1]
                      }
                    },
                    item
                  )
                )
            ])
          }
        },
        {
          label: '操作',
          render: (h, params) => {
            let { id } = params.row
            return h('div', [
              h(
                'el-button',
                {
                  props: {
                    type: 'danger'
                  },
                  on: {
                    click: async () => {
                      let res = await getAuthorDelWorks({ id })
                      let { code, msg } = res
                      if (code === 0) {
                        this.$message.success(msg)
                        this.getWorks()
                      }
                    }
                  }
                },
                '删除'
              ),
              h(
                'el-button',
                {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: async () => {
                      let res = await getAuthorDelWorks({ id })
                      let { code, msg } = res
                      if (code === 0) {
                        this.$message.success(msg)
                        this.getWorks()
                      }
                    }
                  }
                },
                '修改'
              )
            ])
          }
        }
      ]
    }
  },
  methods: {
    async init() {
      let { id } = this
      let res = await getAuthorDetail({ id })
      let { code, data } = res
      if (code === 0) {
        this.authorInfo = data
      }
    },
    async getWorks() {
      let { name } = this.authorInfo
      let res = await getAuthorWorks({ name })
      let { code, data } = res
      if (code === 0) {
        let { list } = data
        this.tableData = list
        this.authorInfo.dynasty = list[0].dynasty
      }
    },
    async handleSubmit() {
      let { id, profile } = this.authorInfo
      let res = await getAuthorUpdate({ id, profile })
      let { code, msg } = res
      if (code === 0) {
        this.$message.success(msg)
      }
    }
  },
  async created() {
    await this.init()
    this.getWorks()
  }
}
</script>

<style lang="scss" scoped>
// @import './index.scss';
</style>
